<template>
  <headPage></headPage>
  <div style="padding: .05rem">
    <el-tabs type="card" @tab-click="getInfo">
      <el-tab-pane label="监控报表">
        <div class="seach-wrap">
          <el-form :inline="true" ref="" :model="paramsReport" label-width="80px">
            <el-row :span="24">
              <el-col :span="5">
                <el-form-item label="开始时间">
                  <el-date-picker
                      v-model="paramsReport.startTime"
                      type="date"
                      placeholder="选择开始时间">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="结束时间">
                  <el-date-picker
                      v-model="paramsReport.endTime"
                      type="date"
                      placeholder="选择结束时间">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="2">
                <el-form-item>
                  <el-button type="primary" v-loading.fullscreen.lock="loading" @click="searchReport">搜索</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div style="padding: .1rem .2rem">
          <el-table
              :data="reportItems"
              stripe
              :header-cell-style="{background:'#F5F7FA',color:'#333333'}"
              style="width: 100%;"
          >
            <el-table-column
                prop="latn_name"
                label=""
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="zhkts"
                label="账号开通数"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="hyzhs"
                label="活跃账号数">
            </el-table-column>
            <el-table-column
                prop="zhzb"
                label="占比"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="tws"
                label="提问数"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="yxfks"
                label="有效反馈数">
            </el-table-column>
            <el-table-column
                prop="wxfks"
                label="无效反馈数"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="dcs"
                label="点踩数">
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="日志明细">
        <div class="seach-wrap">
          <el-form :inline="true" ref="" :model="params" label-width="80px">
            <el-row :span="24">
              <el-col :span="4">
                <el-form-item label="姓名:" label-width="60px">
                  <el-select
                      v-model="params.userName"
                      filterable
                      remote
                      clearable
                      reserve-keyword
                      placeholder="请输入姓名"
                      :remote-method="findUserListByKey"
                      :loading="loading"
                      style="width: 180px"
                  >
                    <el-option
                        v-for="item in userList"
                        :key="item.staffAccount"
                        :label="item.staffName"
                        :value="item.staffName"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="工号:" label-width="60px">
                  <el-input v-model="params.userId" clearable style="width: 100%" placeholder="请输入工号"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="状态" prop="defShow" label-width="60px">
                  <el-select style="width: 120px" v-model="params.status" clearable placeholder="请选择">
                    <el-option
                        v-for="item in status_option"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="评价" prop="defShow" label-width="60px">
                  <el-select style="width: 120px" v-model="params.evaluateStatus" clearable placeholder="请选择">
                    <el-option
                        v-for="item in evaluate_option"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="开始时间">
                  <el-date-picker
                      v-model="params.startTime"
                      type="date"
                      style="width: 180px"
                      placeholder="选择开始时间">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="结束时间">
                  <el-date-picker
                      v-model="params.endTime"
                      type="date"
                      style="width: 180px"
                      placeholder="选择结束时间">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="2">
                <el-form-item>
                  <el-button type="primary" v-loading.fullscreen.lock="loading" @click="search">搜索</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div style="padding: .1rem .2rem">
          <el-table
              :data="dataItems"
              stripe
              :header-cell-style="{background:'#F5F7FA',color:'#333333'}"
              style="width: 100%;"
          >
            <el-table-column
                prop="userName"
                width="100"
                label="用户名"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="userId"
                width="100"
                label="工号">
            </el-table-column>
            <el-table-column
                prop="latnName"
                width="120"
                label="本地网"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="orgName"
                width="120"
                label="部门"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="statusOmg"
                width="100"
                label="状态">
              <template #default="scope">
                <span v-if="scope.row.status==1" style="color:#42b983">{{scope.row.statusOmg}}</span>
                <span v-if="scope.row.status==2" style="color:#ff8000">{{scope.row.statusOmg}}</span>
                <span v-if="scope.row.status==0" style="color:red">{{scope.row.statusOmg}}</span>
              </template>
            </el-table-column>
            <el-table-column
                prop="indicatorName"
                width="120"
                label="指标名称"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop=""
                width="160"
                label="开始时间">
              <template #default="scope">
                {{mon(scope.row.startTime)}}
              </template>
            </el-table-column>
            <el-table-column
                prop=""
                width="160"
                label="结束时间">
              <template #default="scope">
                {{mon(scope.row.createTime)}}
              </template>
            </el-table-column>
            <el-table-column
                prop=""
                width="80"
                label="耗时">
              <template #default="scope">
                {{scope.row.takeUpTime}}秒
              </template>
            </el-table-column>
            <el-table-column
                prop="question"
                label="问题"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop=""
                width="80"
                label="评价">
              <template #default="scope">
          <span v-if="scope.row.evaluateStatus==1" style="color:#42b983;">
            {{evaluateStatus_desc[scope.row.evaluateStatus]}}
          </span>
                <span v-else-if="scope.row.evaluateStatus==2" style="color:red;cursor: pointer" @click="showEvaluate(scope.row)">
            {{evaluateStatus_desc[scope.row.evaluateStatus]}}
          </span>
                <span v-else style="color:#ff8000;">
            {{evaluateStatus_desc[0]}}
          </span>
              </template>
            </el-table-column>
            <el-table-column
                prop="source"
                label="来源"
                width="60"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop=""
                width="100"
                label="操作">
              <template #default="scope">
                <el-button type="primary" size="small" @click="getLogDetail(scope.row.sessionId)">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
              background
              layout="prev, pager, next"
              @current-change="handleCurrentChange"
              :current-page.sync="params.startIndex"
              :page-size="params.pageSize"
              :total="params.totalNum"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
  <el-dialog :fullscreen="true" v-model="dialogTableVisible" title="日志详情" width="80%" class="log-dialog">
    <lagDetail :sessionId="sessionId" @cancel="dialogTableVisible=false"></lagDetail>
  </el-dialog>
  <el-dialog v-model="dialogEvaluateVisible" title="评价信息" width="800">
    <el-form :inline="true" ref="" :model="currItem" label-width="150px">
      <el-row :span="24">
        <el-col :span="24">
          <el-form-item label="反馈信息：">
            <span>{{currErrorItem.evaluate?currErrorItem.evaluate:'无'}}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
import { selectLogInfo,findUserListByKey,searchReport } from '@/api/chartdb'
import consts from '../../common/consts'
import headPage from '../ui/headPage.vue'
import lagDetail from './logDetail.vue'
import moment from 'moment'

export default {
  name: 'log',
  components: {
    headPage,lagDetail
  },
  data(){
    return {
      status_option:consts.status_option,
      evaluate_option:consts.evaluate_option,
      status_option_desc:consts.status_option_desc,
      evaluateStatus_desc:consts.evaluateStatus_desc,
      params:{
        userName:'',
        userId:'',
        status:'',
        evaluateStatus:'',
        startTime:'',
        endTime:'',
        startIndex:1,
        pageSize:10,
        totalNum:0,
      },
      paramsReport:{
        startTime:'',
        endTime:'',
      },
      dataItems:[],
      reportItems:[],
      userList:[],
      sessionId:'',
      dialogTableVisible:false,
      dialogEvaluateVisible:false,
      loading:false,
      currErrorItem:{},
    }
  },
  mounted() {
    this.searchReport();
  },
  methods:{
    getInfo(e){
      console.log("e===>",e.props.label)
      if(e.props.label=="日志明细"){
        this.search()
      }else {
        this.searchReport()
      }
    },
    showEvaluate(item){
      this.currErrorItem=item
      this.dialogEvaluateVisible=true
    },
    mon(date){
      return moment(date).format("YYYY-MM-DD HH:mm:ss")
    },
    search(){
      this.params.startIndex=1
      this.selectLogInfo();
    },
    searchReport(){
      let params={
        startTime:this.paramsReport.startTime?moment(this.paramsReport.startTime).format("YYYYMMDD"):"",
        endTime:this.paramsReport.endTime?moment(this.paramsReport.endTime).format("YYYYMMDD"):""
      }
      searchReport(params).then((res) => {
        console.log("res=====>",res)
        this.reportItems=res.data.data.data
      })
    },
    selectLogInfo(){
      this.loading=true
      const param=this.params
      if(param.startTime)
        param.startTime=moment(param.startTime).format("YYYYMMDD")
      if(param.endTime)
        param.endTime=moment(param.endTime).format("YYYYMMDD")
      selectLogInfo(param).then((res) => {
        this.dataItems=res.data.data.records
        this.params.totalNum=res.data.data.total
        this.params.startIndex=res.data.data.current
        this.params.pageSize=res.data.data.size
        this.loading=false
      })
    },
    findUserListByKey(key){
      console.log("this.params.name====>",key)
      findUserListByKey({ key:key,startIndex:1,pageSize:8 }).then((res) => {
        console.log("res=====>",res)
        this.userList=res.data.data.records
      })
    },
    getLogDetail(sessionId){
      this.sessionId=sessionId;
      this.dialogTableVisible=true
    },
    handleCurrentChange:function (startIndex) {
      var vm = this;
      vm.params.startIndex = startIndex;
      vm.selectLogInfo();
    },
  }
}
</script>

<style lang="scss" scoped>
.seach-wrap{
  /*height: 0.5rem;*/
  /*display: flex;*/
  /*align-items: center;*/
  /*margin: 0.1rem 0.5rem;*/
  border-bottom: 1px solid #f1f1f1;
  /*justify-content: center;*/
  margin-top: 20px;
}
.el-pagination.is-background .el-pager li{
  margin-bottom: 0px !important;
}
.el-pagination{
  display: flex;
  align-items: center;
  margin-top: 5px;
  justify-content: flex-end;
}

</style>